
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../unis/swiper.css">
    <!-- Demo styles -->
    <style>
        p,li,ul,h3{
            margin: 0;
            padding: 0;
            list-style: none;
            font-family: '微软雅黑';
        }
        a{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        html, body {

            font-size: 20px;

        }
        body{
            overflow: hidden;
        }
        .header{
            position: fixed;
            width: 100%;
            height: 80%;
        }
        .swiper-container {
            width: 100%;
            height: 80%;
        }
        .swiper-slide {
            width: 100%;
            background: #eee;
            height:80%;
        }
        .swiper-slide img{
            width: 80%;
            margin-left: 10%;
            margin-top: 12%;
        }
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;
        }

        .goodsShowp{
            background: #ffffff;
            height: 200px;
            position: absolute;
            bottom: 0px;
            z-index: 222;
            width: 96%;
            margin:0px 2%;
        }
        .history{
            width: 35px;
            height: 35px;
            display: block;
            background: url("../images/ionc2.png") no-repeat -10px -6px ;
            background-size: 512px;
            position: absolute;
            left: 10px;
            top:10px;
            z-index: 999;
        }

        .goodsShowpHeader .ionc,.listNav .ionc{
            overflow: hidden;
        }

        .goodsShowpHeader .ionc li,.listNav .ionc li{
            width: 12.5%;
            height: 40px;
            float: right;
        }
        .listNav .ionc li{
            height: 45px;
        }
        .goodsShowpHeader .ionc li:first-child a{
            display: block;
            height:40px;
            width: 30px;
            overflow: hidden;
            background: url("../images/ionc2.png") no-repeat -230px -3px;
            background-size: 512px;
        }
        .listNav .ionc li:first-child a{
            display: block;
            height:45px;
            width: 35px;
            overflow: hidden;
            background: url("../images/ionc2.png") no-repeat -148px -65px;
            background-size: 512px;
        }

        .listNav .ionc li:nth-child(3) a{
            display: block;
            height:45px;
            width: 35px;
            overflow: hidden;
            background: url("../images/ionc2.png") no-repeat -56px -65px;
            background-size: 512px;
        }

        .listNav .ionc li:nth-child(2) a{
            display: block;
            height:45px;
            width: 35px;
            overflow: hidden;
            background: url("../images/ionc2.png") no-repeat -101px -65px;
            background-size: 512px;
        }

        .listNav .ionc li:last-child a{
            display: block;
            height:45px;
            width: 35px;
            overflow: hidden;
            background: url("../images/ionc2.png") no-repeat -11px -65px;
            background-size: 512px;
        }
        .goodsShowpHeader .ionc li:nth-child(2) a{
            display: block;
            height:40px;
            width: 30px;
            overflow: hidden;
            background: url("../images/ionc2.png") no-repeat -185px -3px;
            background-size: 512px;
        }

        .goodsShowpHeader .ionc li:nth-child(3) a{
            display: block;
            height:40px;
            width: 30px;
            overflow: hidden;
            background: url("../images/ionc2.png") no-repeat -138px -3px;
            background-size: 512px;
        }

        .goodsShowpHeader .ionc li:last-child a{
            display: block;
            height:40px;
            width: 30px;
            overflow: hidden;
            background: url("../images/ionc2.png") no-repeat -90px -3px;
            background-size: 512px;
        }
        .footer{
            position: absolute;
            z-index: 2;
            top: 100%;
            margin-top: -221px;
        }
        .footer .goodsName{
            padding: 0px 10px;
            font-size: 0.7rem;
            color: #a3a3a3;
        }
        .footer .goodsNum{
            padding: 10px 10px;
            font-size: 0.9rem;
            color: #dc0000;
        }
        .showpText p:first-child{
            float: left;
            font-size: 0.6rem;
            color: #cecece;

        }
        .showpText p:first-child span{
            color: #e93c55;
        }
        .showpText{padding: 0 10px; overflow: hidden;}
        .showpText p:last-child{
            float: right;
            color: #cecece;
            font-size: 0.6rem;
        }
        .showpMian{
            overflow: hidden;
            background: #ffffff;
            width: 96%;
            margin: 0 2% ;
            padding-bottom: 20px;
            border-bottom: 2px solid #cfcfcf;
        }
        .goodsM{
            padding:8px 10px;
            overflow: hidden;
        }

        .goodsM li{
            width: 50%;
            float: left;
            text-align: center;
            line-height: 2.25rem;
        }

        .goodsM li:first-child a{
            display: block;
            background: #e93c55;
            color: #ffffff;
        }

        .goodsM li:last-child a{
            display: block;
            background: #fe6d82;
            color: #ffffff;
        }
        .goodsFooterShowp{
            height: 90px;
            position: static;
            padding:20px 0px;
        }
        .miaoTop{
            height: 55px;
            padding-top:20px;
        }
        .selectNav{
            width: 96%;
            margin: 0 2%;
        }
        .selectNav li{
            background: #ffffff;
            margin: 5px 0;
            overflow: hidden;

        }
        .selectNav li p{
            line-height: 45px;
            text-indent: 1em;
            float: left;
            color: #010101;
        }
        .left{
            float: left;
        }
        .selectNav li .ofset{

            float: right;
        }
        .selectNav li i{
            width: 50px;
            height: 45px;
            overflow: hidden;
            float: right;
            background:url("../images/ionc2.png") no-repeat 0px -138px;
            background-size: 512px;
        }
        .goodsxiangqing{
            width: 96%;
            margin: 0 2%;
            overflow: hidden;
            background: #ffffff;

        }

        .goodsxiangqing p{
            text-indent: 1em;
            font-size: 0.8rem  ;
            line-height: 40px;
        }
        .goodsxiangqing img{
            width: 100%;
            padding: 0px;
            position: static;

        }
        .goodsInfo,.goodsInfoText{
            background: white;
            width: 96%;
            margin: 2%;
            padding-bottom: 10px;

        }

        .goodsInfoText  li {
            line-height: 1.2rem;margin: 0 10px;
            font-size: 0.8rem;

        }

        .goodsInfoText  li {
            color: #969696;
        }

        .goodsInfoText  li span{
            color: #000000;
        }
        .goodsInfoText  h3,.goodsInfo h3{
            margin: 0 10px;
            line-height: 30px;
            padding-top: 5px;

        }

        .goodsInfo h3:after,.goodsInfoText h3:after{
            content: '';
            margin: 5px 0 5px 0;
            width: 100%;
            display: block;
            height: 1px;
            background: #000;
            -webkit-transform:scaleY(.5);
            -ms-transform:scaleY(.5);
            -o-transform:scaleY(.5);
            transform:scaleY(.5);
        }
        .goodsInfo{
            overflow: hidden;
        }
        .goodsInfo li{
            width: 25%;
            float: left;
            margin-right: 7%;
        }
        .
        .goodsInfo li:last-child{
            width: 25%;
            float: left;
            margin-right: 0%;
        }
        .goodsInfo img{
            padding: 0;
            width: 100%;
            position: static;

        }
        .goodsInfo p{
            text-align: center;
        }
        .swiper-pagination{
            position: fixed;
            top:55%;
        }
        .buy{
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 10;
            background: rgba(0,0,0,.7);
            overflow:hidden;
            padding-top: 42%;
        }
        .buy1 {
            background: #ffffff;
            width: 100%;
            height: 100%;
            position: relative;
        }
        .buy1 .buy_top{
            width: 100%;
            position: absolute;
            border-bottom: 1px solid #cccccc;
            padding-bottom: 105px;
        }
        .buy1 .pic {
            position: absolute;
            border: 1px solid #cccccc;
            width: 100px;
            height: 100px;
            margin-left: 20px;
            top:-20px;
        }
        .buy1 .pic img{
            width: 100%;
        }
        .buy1 .buy_top ul{
            position: absolute;
            left: 140px;
            top:20px
        }
        .buy1 ul li{
            line-height: 22px;
        }
        .buy_bot{
            padding-left: 20px;
            position: absolute;
            top:140px
        }
        .buy_bot_left{
            float: left;
        }
        .buy_bot_left p{
            margin-top: 45px
        }
        .buy_bot ul{
            float: left;
            padding-left:35px;
        }
        .buy_bot ul li{
            margin-top: 28px;
        }
        .buy_bot ul span{
            display: inline-block;
            width: 60px;
            height: 30px;
            margin-left: 10px;
            background: rgb(245,245,245);
            text-align: center;
            line-height: 30px;
            color: rgb(154,154,154);
        }
        .buy_bot ul li .active{
            background: rgb(254,109,130);
            color: white;
        }
        .buy_bot ul .lastli span{
            margin-left: 2px;
        }
        .queding{
            position: absolute;
            width: 90%;
            margin: 0 5%;
            background:  rgb(254,109,130);
            top: 380px;
            text-align: center;
            padding: 10px 0;
            color: white;
            font-family: '微软雅黑'
        }
    </style>
</head>
<body>
<body>

<div class="header" id="header" style="">
    <a class="history" onclick="history.go(-1)" href="##"></a>
    <div class="swiper-container">
        <div class="swiper-wrapper" id="imgsPaly">
            <div class="swiper-slide"> <img src="../images/900.png" alt=""></div>
            <div class="swiper-slide"> <img src="../images/900.png" alt=""></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

</div>
<div class="footer" >
    <div class="showpMian" id="g_name_header_tpl">
        <div class="goodsShowpHeader">
            <ul class="ionc">
                <li><a href="##"></a></li>
                <li><a href="##"></a></li>
                <li><a href="##"></a></li>
                <li><a href="##"></a></li>
            </ul>
        </div>
        <p class="goodsName">JUST</p>
        <p class="goodsNum">￥ 5268.00</p>
        <div class="showpText">
            <p>送至 全国 <span>有货</span> 免运费</p>
            <p>销量: <span>3件</span></p>
        </div>
    </div>
    <div class="goodsM">
        <ul>
            <li><a href="##">加入购物车</a></li>
            <li class="shop"><a href="##">立即购买</a></li>
        </ul>
    </div>
    <div class="miaoTop" style="display: none" id="ccc">
        <!--<a class="history" onclick="history(-1)" href="##"></a>-->
        <div class="listNav">
            <ul class="ionc">
                <li><a href="##"></a></li>
                <li><a href="##"></a></li>
                <li><a href="##"></a></li>
                <li><a href="##"></a></li>
            </ul>
        </div>
    </div>
    <div class="goodsShowp goodsFooterShowp">
        <p class="goodsName">JUST 在线代码格式化 Feedback HTML格式化 XML格式化 CSS格式化 JSON格式化 JavaScript格式化</p>
        <p class="goodsNum">￥ 5268.00</p>
        <div class="showpText">
            <p>送至 全国 <span>有货</span> 免运费</p>
            <p>销量: <span>3件</span></p>
        </div>
    </div>
    <div class="selectNav">
        <ul>
            <li>
                <p>已选 蓝色 80</p>
                <i></i>
            </li>
            <li>
                <p class="left">商品评价 <span>好评率100%</span></p>

                <i></i>
                <p class="ofset">5人评价</p>
            </li>
            <li>
                <p>丰享悦家 <span>自营</span></p>
                <i></i>
            </li>
        </ul>
    </div>

    <div class="goodsxiangqing" id='details-info'>
        <p>商品详情</p>
        <span></span>
        <img src='' />
    </div>
    <div class="goodsInfoText">
        <h3>商品信息</h3>
        <ul>
            <li>商品编号: <span>1632109</span></li>
            <li>价格区间: <span>500以下</span></li>
            <li>商品规格: <span>50ml-100ml</span></li>
            <li>香水香型: <span>淡香</span></li>
        </ul>
    </div>
    <div class="goodsInfo">
        <h3>店铺推荐</h3>
        <ul id='good_list'>

        </ul>
    </div>
    <div class="goodsM">
        <ul>
            <li><a href="##">加入购物车</a></li>
            <li class="shop"><a href="##">立即购买</a></li>
        </ul>
    </div>
</div>
<div class="buy" style="display:none">
    <div class="buy1">
        <div class="buy_top">
            <p class="pic"><img  style="" src="./imgs/yifu.png" alt=""/></p>
            <ul>
                <li style="color: rgb(220,0,0);font-size: 20px">￥17.9</li>
                <li style="font-size: 12px">库存 <span>1245</span> 件</li>
                <li style="font-size: 13px"><lable>已选择</lable>  <span>深灰色 XL</span></li>
            </ul>
        </div>
        <div class="buy_bot">
            <div class="buy_bot_left">
                <p style="margin-top:0">颜色</p>
                <p>尺码</p>
                <p style="margin-top:80px">数量</p>
            </div>
            <ul>
                <li class="li1" style="margin-top:0"> <span class="active">深灰色</span><span>粉红色</span></li>
                <li class='li1'><span class="active">XL</span><span>L</span><span>M</span><br><span style='margin-top:10px'>S</span><span style="margin-top:10px">XS</span></li>
                <li class="lastli"><span style="margin-left:10px" class="jian">-</span><span class="shuliang">1</span><span class="jia">+</span></li>
            </ul>
        </div>
        <div class="queding">
            确定
        </div>
    </div>

</div>
<!-- Swiper JS -->
<script src="../unis/jquery.js"></script>
<script src="../unis/swiper.js"></script>
<script src="../unis/scorllTop.js"></script>
<script src="../js/shop_details_template.js"></script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script src="../js/tmpl/shop_details.js"></script>
<script type="text/javascript" src="http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.touchSwipe.min.js"></script>
<!-- Initialize Swiper -->
<script>
    var num=$('.shuliang').html()

    $('.jian').on('click', function () {

        if($('.shuliang').html()<2){
            $('.shuliang').html()==1
        }else{
            $('.shuliang').html(--num);
        }
    })
    $('.jia').on('click', function () {

        if($('.shuliang').html()>999){
            $('.shuliang').html()==10
        }else{
            $('.shuliang').html(++num);
        }
    })
    $('.shop').on('touchstart',function(){
        $('.buy').fadeIn(200)
        $('.buy').find('.buy1').animate({
            bottom:0
        },800)
    })
    $('.li1 span').click(function(){
        $(this).addClass('active').siblings().removeClass('active')
    })

    $('.buy').on('touchstart',function(ev){
        $(this).fadeOut(200);
        $(this).find('.buy1').animate({
            bottom:-800,
        },800)
    })

    $('.buy1').on('touchstart',function(ev){
        ev.stopPropagation();
    })
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
    function a() {
        $(document).on('touchstart', function (ev) {
            var ev = ev || event;
            ev.preventDefault();
            var startY = event.changedTouches[0].clientY;
            $(document).on('touchmove', function (ev) {
                var ev = ev || event;
                ev.preventDefault();
                if (startY - event.changedTouches[0].clientY > 50) {
                    if (parseInt($('.footer').css('marginTop')) == -221) {
                        $('.footer').animate({
                            marginTop: -$(window).height() - 221
                        }, 200);
                        $('#ccc').fadeIn(200);
                        $('#imgsPaly').fadeOut(200);
                        $(this).off();
                        $('body').css('overflow', 'auto');
                        $('.swiper-pagination').fadeOut(200)
                    }
                }
                if (event.changedTouches[0].clientY - startY > 50) {
                    if (parseInt($('.footer').css('marginTop')) == -($(window).height() + 221)) {
                        $('.footer').animate({
                            marginTop: -221
                        }, 200);
                        $('#imgsPaly').fadeIn(200);
                        $('#ccc').fadeOut(200);
                        $('.swiper-pagination').fadeIn(200)
                    }
                }
            });
            $(document).on('touchend', function () {
                $(this).unbind("touchmove");
            });
        });
    }
    a();
    $('body').on('touchstart', function (ev) {
        var ev = ev || event;
        if ($(window).scrollTop() == 0) {
        }
        var startY = event.changedTouches[0].clientY;
        $('body').on('touchmove', function (ev) {
            var ev = ev || event;
            if (event.changedTouches[0].clientY - startY > 200 && $(window).scrollTop() == 0) {

                    number = 0;
                    indext = 0;
                    $('.footer').animate({
                        marginTop: -221
                    }, 200);
                    $('#imgsPaly').fadeIn(200);
                    $('#ccc').fadeOut(200);
                    $('.swiper-pagination').fadeIn(200);
                    $('body').css('overflow', 'hidden');
                    a();
            }
        })
        $('body').on('touchend', function () {

            $(this).unbind("touchmove");
        });
    })

//    $(window).scroll(function () {
//        if ($(window).scrollTop() == 0) {
//
//                number = 0;
//                indext = 0;
//                $('.footer').animate({
//                    marginTop: -221
//                }, 200);
//                $('#imgsPaly').fadeIn(200);
//                $('#ccc').fadeOut(200);
//                $('.swiper-pagination').fadeIn(200);
//                $('body').css('overflow', 'hidden');
//                a();
//        }
//
//    });
    //        var index = 0;
    //        $(document).swipe( {
    //            swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {
    //                if(direction == 'up'){
    //                    index++;
    //                    $('.footer').animate({
    //                            marginTop: (-$(window).height() - 200)*index
    //                        }, 200,function(){
    //
    //                    })
    //
    //                }
    //
    //                if(direction == 'down'){
    //                    index--
    //                    if(index<=0){
    //                        index=1
    //                    }
    //                    $('.footer').animate({
    //                        marginTop:-200*index
    //                    },200)
    //                }
    //            },
    //        });
</script>
</body>
</html>